Todo List 성능 최적화 Todo List성능 최적화 #07_react-virtualized를 사용한 최적화 예를들어 배열에 데이터가 2500개가 있으면, user가 브라우저 창으로 볼 수 있는 데이터는 10개정도로 제한되어 있다. 그런데 처음부터 2500개를 렌더링하는 것은 비효율적이다. (데이터가 수천개 그 이상일수록 효율은 최악..) 그래서 유저가 스크롤을 내리면 추가적인 데이터들이 보여지도록 해서 렌더링을 최적화 할 수 있다. 위의 명령어를 입력해서 설치를 해줘야함. 설치를 완료한 다음에는 ... React 공부todo list 만들기Todo List 성능 최적화React 공부 Todo List성능 최적화 #06_불변성의 중요성에 대해 useState를 사용하는 경우 기존데이터를 배열에서 수정하지 않고, 부분만 수정을 한 새로운 배열로 생성하게 된다. 기존의 값을 수정하지 않으면서 새로운 값을 만들어내는 것을 불변성을 지킨다라고 함. 위의 예시코드로 기존 배열하고 복사해서 생성한 배열과 다른 배열이라는 것을 확인할 수 있다. 만약 불변성이 지켜지지 않으면, 객체 내부의 값이 바뀐것을 React.memo가 감지할 수 없다. ... Todo List 성능 최적화todo list 만들기React 공부React 공부 Todo List성능 최적화 #08_immer 사용으로 불변성 유지 Todo List 만들어놓은 것을 최적화 하지는 않지만 immer 사용으로 불변성 유지하는 것을 알아놓으면 최적화 작업시 좋을듯 해서 기록함. immer 사용을 위해서는 설치를 해줘야한다. react 프로젝트를 생성하고, 프로젝트 경로로 이동해서 설치를 해주면 된다. immer 사용 방법 nextState에서 produce함수에 parameter2개가 입력됨. 첫번째 parameter는 바꾸... React 공부immer 사용Todo List 성능 최적화todo list 만들기React 공부 Todo List성능 최적화 #01_bulk data입력해서 느려지게 하기 엄청 많은 데이터를 렌더링하게 되면 느려지기 때문에 성능최적화가 필요하다. bulk data를 입력해서 렌더링을 해봤다. createBulkTodos라는 함수를 만들어서 2500개 데이터를 입력했다. 확실히 느려졌다. 체크버튼, 삭제버튼, item추가 전부 느리게 작동한다.... React 공부todo list 만들기Todo List 성능 최적화React 공부
Todo List성능 최적화 #07_react-virtualized를 사용한 최적화 예를들어 배열에 데이터가 2500개가 있으면, user가 브라우저 창으로 볼 수 있는 데이터는 10개정도로 제한되어 있다. 그런데 처음부터 2500개를 렌더링하는 것은 비효율적이다. (데이터가 수천개 그 이상일수록 효율은 최악..) 그래서 유저가 스크롤을 내리면 추가적인 데이터들이 보여지도록 해서 렌더링을 최적화 할 수 있다. 위의 명령어를 입력해서 설치를 해줘야함. 설치를 완료한 다음에는 ... React 공부todo list 만들기Todo List 성능 최적화React 공부 Todo List성능 최적화 #06_불변성의 중요성에 대해 useState를 사용하는 경우 기존데이터를 배열에서 수정하지 않고, 부분만 수정을 한 새로운 배열로 생성하게 된다. 기존의 값을 수정하지 않으면서 새로운 값을 만들어내는 것을 불변성을 지킨다라고 함. 위의 예시코드로 기존 배열하고 복사해서 생성한 배열과 다른 배열이라는 것을 확인할 수 있다. 만약 불변성이 지켜지지 않으면, 객체 내부의 값이 바뀐것을 React.memo가 감지할 수 없다. ... Todo List 성능 최적화todo list 만들기React 공부React 공부 Todo List성능 최적화 #08_immer 사용으로 불변성 유지 Todo List 만들어놓은 것을 최적화 하지는 않지만 immer 사용으로 불변성 유지하는 것을 알아놓으면 최적화 작업시 좋을듯 해서 기록함. immer 사용을 위해서는 설치를 해줘야한다. react 프로젝트를 생성하고, 프로젝트 경로로 이동해서 설치를 해주면 된다. immer 사용 방법 nextState에서 produce함수에 parameter2개가 입력됨. 첫번째 parameter는 바꾸... React 공부immer 사용Todo List 성능 최적화todo list 만들기React 공부 Todo List성능 최적화 #01_bulk data입력해서 느려지게 하기 엄청 많은 데이터를 렌더링하게 되면 느려지기 때문에 성능최적화가 필요하다. bulk data를 입력해서 렌더링을 해봤다. createBulkTodos라는 함수를 만들어서 2500개 데이터를 입력했다. 확실히 느려졌다. 체크버튼, 삭제버튼, item추가 전부 느리게 작동한다.... React 공부todo list 만들기Todo List 성능 최적화React 공부